<script setup>
import spellSort from "@/utils/spell_sort";
import { reactive, ref, getCurrentInstance } from "vue";
import { useRouter , onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
import { Dialog , Toast } from "vant";
import { useGetUserFriends, useGetUserGroups } from "@/hooks/contacts-hook";
import C from "@/components/C";

const app = getCurrentInstance().appContext.app;
const store = useStore();
const user = store.state.user.userInfo;
const notify = store.state.notify;
const D = reactive({
  active: 0,
  router: useRouter(),
});

let friends = null;
let groups = null;
let res = ref([]);
let res2 = ref([]);
let show = ref(false);

(async () => {
  friends = (await useGetUserFriends(show, user._id)).friends;
  res.value = spellSort(friends);
  groups = await useGetUserGroups(show, user._id);
  res2.value = spellSort(groups);
})();

let tempChatUser = null;

onBeforeRouteLeave((to,from) => {
   if(tempChatUser && tempChatUser.line_status === "outline"){
       Toast(tempChatUser.nick_name + "未在线不能发起聊天");
       tempChatUser = null;
       return false;
   }
})

const bindRouterParams = (it)=>{
   tempChatUser = it;
   D.router.type = 'private' 
   D.router.id = it._id
}
</script>

<template>
  <div class="contacts">
    <C.Overlay :show="show" text="努力获取中..." />
    <br />
    <van-cell is-link to="/notify?type=new_friend" icon="friends-o">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">新朋友</span>
        &nbsp;
        <van-tag type="danger" style="border-radius: 50%">
          {{ notify.notifyMessage.count > 0 ? notify.notifyMessage.count : "" }}
        </van-tag>
      </template>
    </van-cell>
    <van-cell is-link to="/notify?type=group_notify" icon="comment-o">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">群通知</span>
        &nbsp;
        <van-tag type="danger" style="border-radius: 50%">
          {{
            notify.groupNotifyMessage.count > 0
              ? notify.groupNotifyMessage.count
              : ""
          }}
        </van-tag>
      </template>
    </van-cell>
    <br />

    <van-tabs color="#08f" shrink v-model:active="D.active" swipeable>
      <van-tab v-for="index in ['好友列表', '群聊列表']" :title="index">
      </van-tab>
    </van-tabs>

    <van-index-bar v-if="D.active === 0" highlight-color="#000">
      <div v-for="(item, index) in res" :key="index">
        <van-index-anchor :index="item.title" />
        <div v-for="(it, i) in item.datas" :key="i">
          <van-cell-group>
            <van-cell
              is-link
              @click="bindRouterParams(it)"
              :to="{ name: 'chat', query: { title: it.nick_name, type:'private',id:it._id}}"
              :title="it.nick_name"
              :label="'QQ号：' + it.qq_account"
            >
              <template #right-icon>
                <small style="color: #ccc">{{
                  it.line_status === "online" ? "在线" : "离线"
                }}</small>
                &nbsp;&nbsp;&nbsp;
                <!-- <small style="margin-right:10px;"> QQ号：{{ it.qq_account }} </small>   -->
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
      <van-empty
        v-if="res.length <= 0"
        image="search"
        description="暂未联系人"
      />
    </van-index-bar>
    <van-index-bar v-if="D.active === 1" highlight-color="#000">
      <div v-for="(item, index) in res2" :key="index">
        <van-index-anchor :index="item.title" />
        <div v-for="(it, i) in item.datas" :key="i">
          <van-cell
            is-link
            @click="D.router.type = 'group'"
            :to="{ path: '/chat', query: { title: it.group_name,type:'group',id:it._id } }"
            :title="it.group_name"
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <small style="margin-right: 10px">
                群号码：{{ it.group_number }}
              </small>
            </template>
          </van-cell>
        </div>
      </div>
      <van-empty
        v-if="res2.length <= 0"
        image="search"
        description="暂未加入或创建任何群组"
      />
    </van-index-bar>
  </div>
</template>

<style lang="scss" scoped>
.contacts {
  background: #eee;
}
</style>
